<template>
    <el-row class="main-cont padd20">
        <el-row>
            <el-col class="title">
                <el-form ref="lineForm" :model="lineForm" class="reset-form" :label-width="labelWidth">
                    <el-col :span="16" class="box box-align-center">
                        <el-form-item label="学年学期">
                            <el-select v-model="lineForm.xnxq" placeholder="请选择" class="text" @change="changeXnxq">
                                <el-option :label="`${item.xn+'-'+item.xq}`" :value="item.xn+'-'+item.xq"
                                    v-for="(item,index) in xqList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学级" style="width: 260px;">
                            <el-select v-model="lineForm.xj" placeholder="" class="text">
                                <el-option label="全部学级" value=""></el-option>
                                <el-option :label="`${item}级`" :value="item" v-for="(item,index) in xjList"
                                    :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业" style="width: 260px;">
                            <el-select v-model="lineForm.zydm" placeholder="请选择专业" class="text" filterable
                                @change="getClassList">
                                <el-option label="全部专业" value=""></el-option>
                                <el-option :label="item.zymc" :value="item.zydm" v-for="(item,index) in zyList"
                                    :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级" prop="bjdm">
                            <el-select v-model="lineForm.bjdm" filterable placeholder="请选择班级" class="text">
                                <el-option v-for="item in classList" :key="item.bjdm" :label="item.bjmc"
                                    :value="item.bjdm">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-col class="btn">
                                <el-button class="reset-comfirm-btn" @click="searchScore()">查询</el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="">
                            <el-col class="btn tr">
                                <el-button class="reset-comfirm-btn" @click="export2Excel">导出</el-button>
                                <el-button class="reset-comfirm-btn" @click="exportWord">教评报告</el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-form>


            </el-col>
        </el-row>

        <el-row class="mt20">
            <el-col>
                <el-table :data="page.list" stripe style="width: 100%" height="540px" v-loading="loading"
                    element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.4)"
                    :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center">
                        <template slot-scope="scope">
                            <span>{{(page.pageNum - 1) * page.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="xj" label="学级" width="80" align="center"></el-table-column>
                    <el-table-column prop="grade" :show-overflow-tooltip="true" label="年级" align="center">
                    </el-table-column>
                    <el-table-column prop="zymc" :show-overflow-tooltip="true" label="专业" align="center">
                    </el-table-column>
                    <el-table-column prop="classname" :show-overflow-tooltip="true" label="班级" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="name" :show-overflow-tooltip="true" label="微信昵称" width="140" align="center">
                    </el-table-column> -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="真实姓名" width="140"
                        align="center"></el-table-column>
                    <el-table-column prop="sn" :show-overflow-tooltip="true" label="学号" width="140" align="center">
                    </el-table-column>
                    <el-table-column prop="cousScore" label="课程得分" width="80" align="center"></el-table-column>
                    <el-table-column prop="sjScore" label="实践得分" width="80" align="center"></el-table-column>
                    <el-table-column prop="zongheScore" label="综合得分" width="80" align="center"></el-table-column>
                    <el-table-column prop="cousProcess" label="课程任务进度" width="110" align="center"></el-table-column>
                    <el-table-column prop="bjfc" label="班级风采" width="80" align="center">
                        <!-- <template slot-scope="scope">
                            <span>{{scope.row.list.length}}</span>
                              <el-link @click="handleEdit(scope.row.list)">{{scope.row.list.length}}</el-link>
                        </template> -->
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="80" align="center">
                        <template slot-scope="scope">
                            <el-link :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="searchScore" background layout="prev, pager, next"
                        :total="page.total" :current-page="page.pageNum" hide-on-single-page></el-pagination>
                </el-col>

            </el-col>

            <el-dialog :visible.sync="editShow" width="600px">
                <el-form :inline="true" ref="formInline" :model="formInline" :rules="rules" class="demo-form-inline">
                    <el-form-item label="真实姓名" prop="name">
                        <el-input v-model="formInline.name" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="微信昵称" prop="name">
                        <el-input v-model="formInline.nickName" placeholder="请输入微信昵称"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('formInline')">保存</el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="text" @click="editShow = false">关闭</el-button>
                </span>
            </el-dialog>
        </el-row>

    </el-row>
</template>

<script>
    import JSZipUtils from 'jszip-utils'
    import JSZip from 'pizzip'
    import Docxtemplater from 'docxtemplater'
    import {
        saveAs
    } from 'file-saver'
    export default {
        data() {
            return {
                goodList: [],
                tongji: {},
                cous: "",
                loading: false,
                schoolid: this.$store.state.schoolId,
                schoolName:'',
                xqList: [],
                zyList: [],
                xjList: [],
                classList:[],
                scoreList: [],
                lineForm: {
                    zydm: '',
                    bjdm:'',
                    xj: '',
                    xnxq: ''
                },
                labelWidth: "70px",
                page: {
                    total: 0,
                    pageNum: 1,
                    list: [],
                    pageSize: 10
                },
                exportTdata: [],
                bjfxList: [],
                editShow: false,
                formInline: {
                    name: '',
                    id: null,
                    nickName: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '姓名不能为空',
                        trigger: 'blur'
                    }]
                },
                info: {}
            };
        },
        created() {
            this.getXqList();
            this.getZyList();
            this.getXjList();
        },
        methods: {

            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            getClassList() {
                this.$ajax.post('/dclass/classList', {
                    schoolid: this.schoolid,
                    zydm: this.lineForm.zydm
                }).then(res => {
                    if (res.code == 0) {
                        this.classList = res.list
                    }
                    this.lineForm.bjdm = ''
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = 'sysuser/modify';
                        let params = {
                            name: this.formInline.name,
                            id: this.formInline.id,
                            // nickName:this.formInline.nickName
                        };
                        this.$ajax.post(url, params).then(res => {
                            if (res.code == '0') {
                                this.editShow = false
                                this.searchScore()
                            } else {
                                this.$message.error('请求失败！');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            exportData() {

            },
            closeTk() {
                this.tkzt = false;
            },
            openPopup() {
                this.$router.push({
                    path: "/zs/zsbf/tjzs"
                })
            },
            handleEdit(row) {
                console.log(row);
                this.editShow = true
                this.formInline.name = row.name
                this.formInline.id = row.userid
                // this.formInline.nickName = row.name
            },
            getXqList() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getXqList(params).then(res => {
                    if (res.code == '0') {
                        this.xqList = res.list;
                        res.list.map(resp => {
                            if (resp.isCur == 1) {
                                this.lineForm.xnxq = resp.xn + resp.xq;
                                this.xn = resp.xn;
                                this.xq = resp.xq.substr(0, 3);
                                this.searchScore()
                            }
                        })
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getZyList() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getZyList(params).then(res => {
                    if (res.code == '0') {
                        this.zyList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            getXjList() {
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getXjList(params).then(res => {
                    if (res.code == '0') {
                        this.xjList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeXnxq(e) {
                this.xn = e.split('-')[0];
                this.xq = e.split('-')[1].substr(0, 3);
                this.searchScore();
            },
            changeXj(e) {
                this.lineForm.xj = e,
                    this.searchScore();
            },
            // changeZy(e) {
            //     this.lineForm.zydm = e;
            //     // this.searchScore();
            // },

            searchScore(pageNum){
                console.log(pageNum);
                this.loading = true
                let params = {
                    schoolId: this.schoolid,
                    xn: this.xn,
                    xq: this.xq,
                    zydm: this.lineForm.zydm,
                    xj: this.lineForm.xj,
                    page: pageNum==undefined?1:pageNum,
                    rows:this.page.pageSize
                };
                this.$api.wyv3.getStore(params).then(res => {
                    console.log(res);
                    this.loading = false
                    if (res.code == '200') {
                        this.page = res.data;
                        //this.exportData()
                    }
                })
            },
            // searchScore(pageNum) {
            //     this.loading = true
            //     let params = {
            //         schoolId: this.schoolid,
            //         xn: this.xn,
            //         xq: this.xq,
            //         zydm: this.lineForm.zydm,
            //         xj: this.lineForm.xj,
            //         pageNum: pageNum,
            //     };
            //     this.$api.Admin.tjScoreQuery(params).then(res => {
            //         console.log(res);
            //         this.loading = false
            //         if (res.code == "0") {
            //             this.page = res.list;
            //             //this.exportData()
            //         } else {
            //             this.$message.error('请求失败！');
            //         }
            //     })
            // },
            changeStatus(userid, status) {
                let params = {
                    'userId': userid,
                    'status': status
                };
                this.$api.szhgl.qyjy(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('操作成功！');
                        this.glylb();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleSelect() {
                this.getBfList()
            },
            //导出报告
            exportWord() {
                const _this = this
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                let params = {
                    schoolid: this.schoolid,
                    xn: this.xn,
                    xq: this.xq,
                };
                this.$ajax.post("/tongji/pgbgTerm", params).then(res => {
                    let _this = this
                    if (res.code == '0') {
                        console.log(res);
                        loading.close();
                        if(this.cous !=" "){
                            JSZipUtils.getBinaryContent('/static/test.docx', function(error, content) {
                                console.log(error, content);
                                // 抛出异常
                                if (error) {
                                    throw error
                                }
                                // 创建一个JSZip实例，内容为模板的内容
                                let zip = new JSZip(content)
                                // 创建并加载docxtemplater实例对象
                                let doc = new Docxtemplater().loadZip(zip)
                                // 设置模板变量的值


                                doc.setData({
                                   goodList: res.goodList,
                                   bjmc: res.cous.bjmc,
                                   zymc: res.cous.zymc,
                                   cousName:res.cous.cousName,
                                   trCnt: res.tongji.trCnt,
                                   stuCnt: res.tongji.stuCnt,
                                   learnedTime: res.tongji.learnedTime,
                                   uploadCnt: res.tongji.uploadCnt,
                                   pyCnt: res.tongji.pyCnt,
                                   ldfcCnt: res.tongji.ldfcCnt,
                                   schoolName: res.tongji.schoolName
                                })
                                try {
                                    // 用模板变量的值替换所有模板变量
                                    doc.render()
                                } catch (error) {
                                    // 抛出异常
                                    this.$message.error('导出报表失败')
                                    throw error
                                }

                                // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                                let out = doc.getZip().generate({
                                    type: 'blob',
                                    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                                })
                                // 将目标文件对象保存为目标类型的文件，并命名
                                saveAs(out, '评估报告.docx')
                            })
                        }

                    } else {
                        loading.close();
                        this.$message.error(res.msg);
                    }
                })
            },
            export2Excel() {
                let params = {
                    schoolId: this.schoolid,
                    xn: this.xn,
                    xq: this.xq,
                    zydm: this.lineForm.zydm,
                    xj: this.lineForm.xj,
                    page: 1,
                    rows: this.page.total
                };
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$api.wyv3.getStore(params).then(res => {
                    if (res.code == "200") {
                        loading.close();
                        this.exportTdata = res.data.list;
                        if (this.exportTdata.length == 0) {
                            this.$message.warning("暂无数据可以导出")
                        } else {
                            require.ensure([], () => {
                                const {
                                    export_json_to_excel
                                } = require('@/vendor/Export2Excel');
                                const tHeader = ['学生', '真实姓名', '学号', '课程任务得分',
                                    '实践任务得分', '综合得分', '课程任务进度', '班级风采'
                                ];
                                const filterVal = ['viewName', 'name', 'sn', 'cousScore', 'sjScore',
                                    'zongheScore', 'cousProcess',
                                    'bjfc'
                                ];
                                const list = this.exportTdata;
                                const data = this.formatJson(filterVal, list);
                                export_json_to_excel(tHeader, data, '成绩统计');
                            })
                        }
                    }
                })
            },
            formatJson(filterVal, jsonData) {
                console.log(filterVal, jsonData);
                return jsonData.map(v => filterVal.map(j => {
                    return v[j]
                }))
            }
            // formatJson(filterVal, jsonData) {
            //     console.log(filterVal,jsonData);
            //     return jsonData.map(v => filterVal.map(j => {
            //         if (j == `bjfcCnt`) {
            //             // return v.list.length
            //             return v.list.length
            //         } else {
            //             return v[j]
            //         }
            //     }))
            // }
        }
    }
</script>

<style scoped lang="scss">
    .main-cont {
        position: relative;
        height: 100%;
        background-color: #fff;
        overflow-x: auto;
    }

    .bf-btn {
        padding: 3px 5px;
        width: 64px;
        height: 24px;
        background: linear-gradient(-7deg, #FF9B4F, #FFBC3A);
        border-radius: 12px;
        color: #fff;
        cursor: pointer;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /deep/ .el-icon-loading {
        color: #fff;
    }

    /deep/ .el-loading-spinner .el-loading-text {
        color: #fff;
    }
</style>
